<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
</head>
<body>
  <div>
    <input type="text" placeholder="姓名" v-model="employee.name">
    <input type="text" placeholder="工资" v-model="employee.salary">
    <input type="text" placeholder="工作" v-model="employee.job">
    <input type="button" value="添加" @click="add()">
    <table border="1" width="500px">
      <caption>员工列表</caption>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>工资</th>
        <th>工作</th>
        <th>操作</th>
      </tr>
      <tr v-for="(employee, i) in arr">
        <td>{{i + 1}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.salary}}</td>
        <td>{{employee.job}}</td>
        <td><input type="button" value="删除" @click="del(i)"></td>
      </tr>
    </table>
  </div>
  <script src="vue.min.js"></script>
  <script>
    let v = new Vue({
      el : "div",
      data : {
        employee : {name : "", salary : "", job : ""},
        arr:[]
      },
      methods : {
        add() {
          // 把添加的对象加入数组中
          v.arr.push({name:v.employee.name, salary:v.employee.salary, job:v.employee.job});
        },
        del(i) {
          // splice(起始位置, 删除数量)表示从数组中删除数据
          v.arr.splice(i, 1);
        }
      }
    })
  </script>
</body>
</html>